<template>
  <div :style="{ ...coreStyle.marginSame(8) }">
    <a-card>
      <a-form ref="confFormQueryRef" :model="confFormQueryModel" labelAlign="left" layout="vertical" :style="{ ...coreStyle.marginBottom(10) }">
        <a-row :gutter="16" v-show="!confFormQueryVisible">
          <a-col :span="8">
            <a-form-item :style="{ ...coreStyle.marginBottom(-8) }">
              <a-input-search v-model:value="confFormQueryModel.keySearchVo" placeholder="关键字搜索" :disabled="confFormQuerySubmitting" @search="confFormQuerySearch" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :style="{ ...coreStyle.marginBottom(-8) }">
              <Dict v-model="confFormQueryModel.confEnv" dictKey="confConfEnvSearch" formItemName="confEnv" @change="confConfEnvDictSelectChange" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-button type="link" :style="{ ...coreStyle.floatRight }" @click="confFormQueryUpDown">
              展开
              <CoreIcon icon="akar-icons:chevron-down" :size="14" />
            </a-button>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-show="confFormQueryVisible">
          <a-col :span="8">
            <a-form-item>
              <a-input-search v-model:value="confFormQueryModel.keySearchVo" placeholder="关键字搜索" :disabled="confFormQuerySubmitting" @search="confFormQuerySearch" />
            </a-form-item>
          </a-col>
          <a-col :span="16">
          </a-col>
          <a-col :span="8">
            <a-form-item label="配置名称">
              <a-input v-model:value="confFormQueryModel.confNameAndLike" placeholder="输入配置名称" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="配置标识">
              <a-input v-model:value="confFormQueryModel.confKeyAndLike" placeholder="输入配置标识" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="配置值">
              <a-input v-model:value="confFormQueryModel.confValueAndLike" placeholder="输入配置值" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <!-- <a-form-item label="配置类型">
              <a-input v-model:value="confFormQueryModel.confTypeAndLike" placeholder="输入配置类型" />
            </a-form-item> -->
            <Dict v-model="confFormQueryModel.confType" dictKey="confConfType" formItemName="confType" />
          </a-col>
          <a-col :span="8">
            <!-- <a-form-item label="配置环境">
              <a-input v-model:value="confFormQueryModel.confEnvAndLike" placeholder="输入配置环境" />
            </a-form-item> -->
            <Dict v-model="confFormQueryModel.confEnv" dictKey="confConfEnv" formItemName="confEnv" />
          </a-col>
          <!-- <a-col :span="8">
            <a-form-item label="描述">
              <a-input v-model:value="confFormQueryModel.descriptionAndLike" placeholder="输入描述" />
            </a-form-item>
          </a-col> -->
          <!-- <a-col :span="8">
            <a-form-item label="排序权重">
              <a-input-number v-model:value="confFormQueryModel.weightOrder" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col> -->
          <a-col :span="24">
            <a-space :style="{ ...coreStyle.floatRight }">
              <a-button @click="confFormQueryReset">
                <CoreIcon icon="ant-design:clear-outlined" :size="14" />
                重置
              </a-button>
              <a-button type="primary" ghost :loading="confFormQuerySubmitting" @click="confFormQuerySearch">
                <CoreIcon icon="ant-design:search-outlined" :size="14" />
                查询
              </a-button>
              <a-button type="link" @click="confFormQueryUpDown">
                收起
                <CoreIcon icon="akar-icons:chevron-up" :size="14" />
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <a-space>
        <a-button type="primary" ghost @click="confAdd">
          <CoreIcon icon="carbon:add-alt" :size="14" />
          新增
        </a-button>
        <a-button type="dashed" @click="confUpdate" v-if="confListSelectLength === 1">
          <CoreIcon icon="ri:brush-line" :size="14" />
          修改
        </a-button>
        <a-popconfirm title="确认删除？" placement="bottom" @confirm="confDelete" v-if="confListSelectLength > 0">
          <a-button type="dashed" danger>
            <CoreIcon icon="jam:delete" :size="14" />
            删除
          </a-button>
        </a-popconfirm>
        <a-button @click="confDetailInfo" v-if="confListSelectLength === 1">
          <CoreIcon icon="heroicons-outline:light-bulb" :size="14" />
          详情
        </a-button>
      </a-space>
      <a-space :style="{ ...coreStyle.floatRight }">
        <a-button type="link" shape="circle" @click="confListGetDataSet">
          <CoreIcon icon="ci:refresh" :size="22" />
        </a-button>
      </a-space>
      <a-table
        rowKey="id"
        :columns="confListColumns"
        :data-source="confListDataSet"
        :loading="confListLoading"
        :pagination="false"
        bordered
        :customRow="confListCustomRow"
        :row-selection="{ fixed: true, selectedRowKeys: confListSelectedRowKeys, onChange: confListRowOnChange }"
        :scroll="{ x: '100%', y: 550 }"
        :style="{ ...coreStyle.marginTop(10) }"
      >
        <template #confTypeData="{ text }">
          <span>{{ coreToolStore.getDictDisplayName('confConfType', text) }}</span>
        </template>
        <template #confEnvData="{ text }">
          <span>
            <a-tag color="green" :style="{ 'line-height': '19px' }" v-if="'dev' === text">{{ coreToolStore.getDictDisplayName('confConfEnv', text) }}</a-tag>
            <a-tag color="purple" :style="{ 'line-height': '19px' }" v-if="'pro' === text">{{ coreToolStore.getDictDisplayName('confConfEnv', text) }}</a-tag>
          </span>
        </template>
      </a-table>
      <a-pagination
        v-model:current="confListDataPage"
        v-model:pageSize="confListDataRows"
        :total="confListDataCount"
        show-size-changer
        show-quick-jumper
        :page-size-options="[ ...coreStyle.antdPaginationPageSizeOptions ]"
        :show-total="(total, range) => coreStyle.antdPaginationShowTotal(total, range)"
        :style="{ ...coreStyle.marginTop(10), ...coreStyle.textAlignCenter }"
        @change="confListPaginationChange"
        @showSizeChange="confListPaginationShowSizeChange"
        v-if="confListPaginationVisible"
      >
      </a-pagination>
      <p :style="{ ...coreStyle.marginTop(14), ...coreStyle.marginBottom(6), ...coreStyle.textAlignCenter }" v-if="!confListPaginationVisible">
        {{ coreStyle.antdPaginationShowTotal(confListDataCount) }}
      </p>
    </a-card>
    <a-drawer
      v-model:visible="confEditDrawerVisible"
      title="编辑系统配置信息"
      placement="right"
      :closable="false"
      :width="'40%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
      @close="confEditDrawerOnClose"
    >
      <a-form ref="confFormRef" :model="confFormModel" :rules="confFormRules" labelAlign="left" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="配置名称" name="confName">
              <a-input v-model:value="confFormModel.confName" placeholder="输入配置名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="排序权重" name="weightOrder">
              <a-input-number v-model:value="confFormModel.weightOrder" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!-- <a-form-item label="配置类型" name="confType">
              <a-input v-model:value="confFormModel.confType" placeholder="输入配置类型" />
            </a-form-item> -->
            <Dict v-model="confFormModel.confType" dictKey="confConfType" formItemName="confType" @change="confConfTypeDictSelectChange" />
          </a-col>
          <a-col :span="12">
            <!-- <a-form-item label="配置环境" name="confEnv">
              <a-input v-model:value="confFormModel.confEnv" placeholder="输入配置环境" />
            </a-form-item> -->
            <Dict v-model="confFormModel.confEnv" dictKey="confConfEnv" formItemName="confEnv" />
          </a-col>
          <a-col :span="24">
            <a-form-item label="配置标识 (同一配置环境下不能重复)" name="confKey">
              <a-input v-model:value="confFormModel.confKey" placeholder="输入配置标识" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="配置值" name="confValue" v-if="!confConfValueFormItemVisible">
              <a-input v-model:value="confFormModel.confValue" placeholder="输入配置值" />
            </a-form-item>
            <a-form-item name="confValue" v-if="confConfValueFormItemVisible">
              <template #label>
                <span>配置值 ( json )<a :style="{ ...coreStyle.marginLeft(8) }"><a-tag color="orange" :style="{ 'line-height': '19px' }" @click="confConfValueWriteInDefaultValue">填入默认值</a-tag></a></span>
              </template>
              <CodeEditorJson ref="confConfValueCodeEditorRef" langType="json" :docStr="confConfValueStr" :height="confConfValueEditorHeight" v-if="confConfValueEditorVisible" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="描述" name="description">
              <a-textarea v-model:value="confFormModel.description" :rows="3" placeholder="输入描述" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div :style="{ ...coreStyle.antdDrawerFooter }">
        <a-space>
          <a-button @click="confFormReset">
            <CoreIcon icon="ant-design:clear-outlined" :size="14" />
            重置
          </a-button>
          <a-button type="primary" ghost :loading="confFormSaveSubmitting" @click="confFormNextAdd">
            <CoreIcon icon="tabler:player-track-next" :size="14" />
            继续录入
          </a-button>
          <a-button type="primary" ghost :loading="confFormSaveSubmitting" @click="confFormSave">
            <CoreIcon icon="ant-design:save-outlined" :size="14" />
            保存
          </a-button>
        </a-space>
      </div>
    </a-drawer>
    <a-drawer
      v-model:visible="confDetailDrawerVisible"
      title="系统配置详细信息"
      placement="right"
      :closable="false"
      :width="'40%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
    >
      <a-space direction="vertical" :size="20" :style="{ ...coreStyle.width('100%') }">
        <a-descriptions title="基础信息" :column="2" bordered>
          <a-descriptions-item label="配置名称" :span="1">{{ confDetailModel.confName }}</a-descriptions-item>
          <a-descriptions-item label="排序权重" :span="1">{{ confDetailModel.weightOrder }}</a-descriptions-item>
          <a-descriptions-item label="配置类型" :span="1">{{ coreToolStore.getDictDisplayName('confConfType', confDetailModel.confType) }}</a-descriptions-item>
          <a-descriptions-item label="配置环境" :span="1">{{ coreToolStore.getDictDisplayName('confConfEnv', confDetailModel.confEnv) }}</a-descriptions-item>
          <a-descriptions-item label="配置标识" :span="2">{{ confDetailModel.confKey }}</a-descriptions-item>
          <a-descriptions-item label="配置值" :span="2">{{ confDetailModel.confValue }}</a-descriptions-item>
          <a-descriptions-item label="描述" :span="2">{{ confDetailModel.description }}</a-descriptions-item>
        </a-descriptions>
      </a-space>
      <div :style="{ ...coreStyle.antdDrawerFooter }">
        <a-space>
          <a-button type="dashed" @click="confDetailUpdate">
            <CoreIcon icon="ri:brush-line" :size="14" />
            修改
          </a-button>
        </a-space>
      </div>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { mapStores } from 'pinia'
import { useCoreToolStore } from '/@/store/modules/cn/core/tool/coreToolStore'
import type { Res } from '/@/tool/Res'
import type { Param } from '/@/tool/Param'

import { useConfStore } from '/@/store/modules/cn/core/conf/confStore'

import type { Conf } from '/@/model/cn/core/conf/eo/Conf'
import { toConf } from '/@/model/cn/core/conf/eo/Conf'

import type { ConfQO } from '/@/model/cn/core/conf/qo/ConfQO'
import { toConfQO } from '/@/model/cn/core/conf/qo/ConfQO'

import type { ConfVO } from '/@/model/cn/core/conf/vo/ConfVO'
import { toConfVO } from '/@/model/cn/core/conf/vo/ConfVO'

@Options({
  name: 'CoreSysConf',
  components: {
  },
  computed: {
    ...mapStores(useCoreToolStore, useConfStore),
  },
})
export default class CoreSysConf extends Vue {

  confListDataSet: Array<ConfVO> = []

  confListColumns: Array<object> = [
    {
      title: '配置名称',
      dataIndex: 'confName',
      align: 'center',
      ellipsis: true,
      width: 200,
    },
    {
      title: '配置标识',
      dataIndex: 'confKey',
      align: 'center',
      ellipsis: true,
      width: 200,
    },
    {
      title: '配置值',
      dataIndex: 'confValue',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '配置类型',
      dataIndex: 'confType',
      align: 'center',
      slots: { customRender: 'confTypeData' },
      // ellipsis: true,
      width: 100,
    },
    {
      title: '配置环境',
      dataIndex: 'confEnv',
      align: 'center',
      slots: { customRender: 'confEnvData' },
      // ellipsis: true,
      width: 100,
    },
    {
      title: '排序权重',
      dataIndex: 'weightOrder',
      align: 'center',
      // ellipsis: true,
      width: 100,
    },
  ]

  confListLoading: boolean = false

  confListSelectedRowKeys: string[] = []

  confListSelectData: Array<ConfVO> = []

  confListSelectLength: number = 0

  confListSelectCurrentRowIndex: number = -1

  confListSelectCurrentRowData: ConfVO = toConfVO()

  confListPaginationVisible: boolean = true

  confListDataPage: number = 1

  confListDataRows: number = 10

  confListDataCount: number = 0

  confListRowOnChange(selectedRowKeys, selectedRows) {
    this.confListSelectedRowKeys = [ ...selectedRowKeys ]
    this.confListSelectData = [ ...selectedRows ]
    this.confListSelectLength = selectedRows.length
  }

  confListCustomRow(record, index) {
    return {
      'class': index === this.confListSelectCurrentRowIndex ? 'ant-table-row-selected' : '',
      onClick: (event) => {
        this.confListSelectCurrentRowIndex = index
        this.confListSelectCurrentRowData = { ...record }
        let selectedRowKeys = [ ...this.confListSelectedRowKeys ]
        let selectedRows = [ ...this.confListSelectData ]
        if (selectedRowKeys.includes(record.id)) {
          this.confListRowOnChange([ ...selectedRowKeys.filter(eo => { return eo !== record.id }) ], [ ...selectedRows.filter(eo => { return eo.id !== record.id }) ])
        } else {
          selectedRowKeys.push(record.id)
          selectedRows.push(record)
          this.confListRowOnChange([ ...new Set(selectedRowKeys) ], [ ...new Set(selectedRows) ])
        }
      },
      onDblclick: (event) => {
        this.confStore.pkVo(this.$toParam<ConfQO>({ id: this.confListSelectCurrentRowData.id } as ConfQO)).then((res: Res<ConfVO>) => {
          if (res.succ) {
            this.confDetailModel = { ...res.data[0] }
            this.confDetailDrawerVisible = true
          } else {
            this.$message.error(res.msg, 6)
          }
        })
      },
    }
  }

  confListGetDataSet() {
    this.confListLoading = true
    this.confListRowOnChange([], [])
    this.confListSelectCurrentRowIndex = -1
    this.confListSelectCurrentRowData = toConfVO()
    this.confStore.pagingVo(this.$toParam<ConfQO>({ weightOrderAsc: 'y' } as ConfQO, this.confListDataPage, this.confListDataRows)).then((res: Res<ConfVO>) => {
      if (res.succ) {
        this.confListPaginationVisible = true
        this.confListDataSet = [ ...res.data ]
        this.confListDataCount = res.count
        setTimeout(() => { this.confListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.confListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.confListLoading = false }, 500)
    })
  }

  confListPaginationChange() {
    this.confListGetDataSet()
  }

  confListPaginationShowSizeChange() {
    this.confListGetDataSet()
  }

  confFormQueryVisible: boolean = false

  confFormQuerySubmitting: boolean = false

  confFormQueryModel: ConfQO = toConfQO()

  confFormQueryUpDown() {
    this.confFormQueryVisible = !this.confFormQueryVisible
  }

  confFormQueryReset() {
    if (this.$refs.confFormQueryRef) {
      this.$refs.confFormQueryRef.resetFields()
      this.confFormQueryModel = toConfQO()
    }
  }

  confFormQuerySearch() {
    this.confFormQuerySubmitting = true
    this.confListLoading = true
    this.confListRowOnChange([], [])
    this.confListSelectCurrentRowIndex = -1
    this.confListSelectCurrentRowData = toConfVO()
    this.confStore.queryVo(this.$toParam<ConfQO>(this.$toSearch({ ...this.confFormQueryModel }))).then((res: Res<ConfVO>) => {
      if (res.succ) {
        this.confListPaginationVisible = false
        this.confListDataSet = [ ...res.data ]
        this.confListDataCount = res.count
        setTimeout(() => { this.confFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.confListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.confFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.confListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.confFormQuerySubmitting = false }, 5000)
      setTimeout(() => { this.confListLoading = false }, 500)
    })
  }

  confConfEnvDictSelectChange(value) {
    this.confFormQuerySearch()
  }

  confEditDrawerVisible: boolean = false

  confFormSaveSubmitting: boolean = false

  confFormSaveContinue: boolean = false

  confFormModel: Conf = toConf()

  confFormRules: object = {
    confKey: [
      { type: 'string', required: true, message: '配置标识不能为空！', trigger: ['change', 'blur'] },
    ],
    confName: [
      { type: 'string', required: true, message: '配置名称不能为空！', trigger: ['change', 'blur'] },
    ],
    confType: [
      { type: 'string', required: true, message: '配置类型不能为空！', trigger: ['change', 'blur'] },
    ],
    confEnv: [
      { type: 'string', required: true, message: '配置环境不能为空！', trigger: ['change', 'blur'] },
    ],
    confValue: [
      { type: 'string', required: true, message: '配置值不能为空！', trigger: ['change', 'blur'] },
    ],
    // description: [
    //   { type: 'string', required: true, message: '描述不能为空！', trigger: ['change', 'blur'] },
    // ],
    // weightOrder: [
    //   { type: 'number', required: true, message: '排序权重不能为空！', trigger: ['change', 'blur'] },
    // ],
  }

  confConfValueFormItemVisible: boolean = false

  confConfValueDefaultStr: string = 
`{
  "paramKey": "paramValue",
  "paramName": "paramValue"
}`

  confConfValueStr: string = ''

  confConfValueEditorHeight: string = '185px'

  confConfValueEditorVisible: boolean = false

  confConfTypeDictSelectChange(value) {
    if ('json' === value) {
      this.confConfValueFormItemVisible = true
      this.confConfValueEditorVisible = true
    } else {
      if (this.$refs.confConfValueCodeEditorRef) {
        this.$refs.confConfValueCodeEditorRef.editorView.destroy()
      }
      this.confConfValueEditorVisible = false
      this.confConfValueFormItemVisible = false
    }
  }

  confConfValueWriteInDefaultValue() {
    this.$refs.confConfValueCodeEditorRef.editorView.dispatch({
      changes: {from: 0, to: this.$refs.confConfValueCodeEditorRef.editorView.state.doc.length, insert: ''}
    })
    this.$refs.confConfValueCodeEditorRef.editorView.dispatch({
      changes: {from: 0, insert: this.confConfValueDefaultStr}
    })
  }

  confFormReset() {
    if (this.$refs.confFormRef) {
      this.$refs.confFormRef.resetFields()
      this.confFormModel = toConf()
    }
    if (this.$refs.confConfValueCodeEditorRef) {
      this.$refs.confConfValueCodeEditorRef.editorView.dispatch({
        changes: {from: 0, to: this.$refs.confConfValueCodeEditorRef.editorView.state.doc.length, insert: ''}
      })
      this.confConfValueStr = ''
    }
  }

  confFormSubmit() {
    this.confFormSaveSubmitting = true
    if (this.$refs.confConfValueCodeEditorRef) {
      this.confFormModel.confValue = this.$refs.confConfValueCodeEditorRef.editorView.state.doc.toString()
    }
    this.$refs.confFormRef.validate().then(() => {
      if (this.confFormModel.id) {
        this.confStore.update(this.$toParam<Conf>(this.confFormModel)).then((res: Res<Conf>) => {
          if (res.succ) {
            this.$message.success(res.msg, 3)
            this.confFormReset()
            this.confFormSaveSubmitting = false
            if (!this.confFormSaveContinue) {
              if (this.$refs.confConfValueCodeEditorRef) {
                this.$refs.confConfValueCodeEditorRef.editorView.destroy()
                this.confConfValueStr = ''
                this.confConfValueEditorVisible = false
                this.confConfValueFormItemVisible = false
              }
              this.confEditDrawerVisible = false
              this.confListGetDataSet()
            }
          } else {
            this.$message.error(res.msg, 6)
            setTimeout(() => { this.confFormSaveSubmitting = false }, 3000)
          }
        }).catch(err => {
          setTimeout(() => { this.confFormSaveSubmitting = false }, 3000)
        })
      } else {
        this.confStore.save(this.$toParam<Conf>(this.confFormModel)).then((res: Res<Conf>) => {
          if (res.succ) {
            this.$message.success(res.msg, 3)
            this.confFormReset()
            this.confFormSaveSubmitting = false
            if (!this.confFormSaveContinue) {
              if (this.$refs.confConfValueCodeEditorRef) {
                this.$refs.confConfValueCodeEditorRef.editorView.destroy()
                this.confConfValueStr = ''
                this.confConfValueEditorVisible = false
                this.confConfValueFormItemVisible = false
              }
              this.confEditDrawerVisible = false
              this.confListGetDataSet()
            }
          } else {
            this.$message.error(res.msg, 6)
            setTimeout(() => { this.confFormSaveSubmitting = false }, 3000)
          }
        }).catch(err => {
          setTimeout(() => { this.confFormSaveSubmitting = false }, 3000)
        })
      }
    }).catch(() => {
      setTimeout(() => { this.confFormSaveSubmitting = false }, 3000)
    })
  }

  confFormSave() {
    this.confFormSaveContinue = false
    this.confFormSubmit()
  }

  confFormNextAdd() {
    this.confFormSaveContinue = true
    this.confFormSubmit()
  }

  confAdd() {
    if (this.confFormModel.id) {
      this.confFormReset()
    }
    if ('json' === this.confFormModel.confType) {
      this.confConfValueFormItemVisible = true
      this.confConfValueEditorVisible = true
    }
    this.confEditDrawerVisible = true
  }

  confUpdate() {
    this.confStore.pk(this.$toParam<ConfQO>({ id: this.confListSelectData[0].id } as ConfQO)).then((res: Res<Conf>) => {
      if (res.succ) {
        this.confFormReset()
        this.confFormModel = { ...res.data[0] }
        if ('json' === this.confFormModel.confType) {
          this.confConfValueStr = this.confFormModel.confValue || ''
        }
        this.confEditDrawerVisible = true
        if ('json' === this.confFormModel.confType) {
          this.confConfValueFormItemVisible = true
          this.confConfValueEditorVisible = true
        }
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  confEditDrawerOnClose() {
    if (this.confFormSaveContinue) {
      this.confFormSaveContinue = false
      this.confListGetDataSet()
    }
    if (this.$refs.confConfValueCodeEditorRef) {
      this.$refs.confConfValueCodeEditorRef.editorView.destroy()
      this.confConfValueStr = ''
      this.confConfValueEditorVisible = false
      this.confConfValueFormItemVisible = false
    }
  }

  confDelete() {
    let param: Array<Conf> = []
    this.confListSelectData.forEach((eo: ConfVO) => {
      param.push({ id: eo.id } as Conf)
    })
    this.confStore.removeBatch(this.$toParam<Conf>(param)).then((res: Res<Conf>) => {
      if (res.succ) {
        this.$message.success(res.msg, 3)
        this.confListGetDataSet()
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  confDetailDrawerVisible: boolean = false

  confDetailModel: ConfVO = toConfVO()

  confDetailInfo() {
    this.confStore.pkVo(this.$toParam<ConfQO>({ id: this.confListSelectData[0].id } as ConfQO)).then((res: Res<ConfVO>) => {
      if (res.succ) {
        this.confDetailModel = { ...res.data[0] }
        this.confDetailDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  confDetailUpdate() {
    this.confStore.pk(this.$toParam<ConfQO>({ id: this.confDetailModel.id } as ConfQO)).then((res: Res<Conf>) => {
      if (res.succ) {
        this.confFormReset()
        this.confFormModel = { ...res.data[0] }
        if ('json' === this.confFormModel.confType) {
          this.confConfValueStr = this.confFormModel.confValue || ''
        }
        this.confDetailDrawerVisible = false
        this.confEditDrawerVisible = true
        if ('json' === this.confFormModel.confType) {
          this.confConfValueFormItemVisible = true
          this.confConfValueEditorVisible = true
        }
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  mounted() {
    this.confListGetDataSet()
  }

  beforeUnmount() {
    if (this.$refs.confConfValueCodeEditorRef) {
      this.$refs.confConfValueCodeEditorRef.editorView.destroy()
    }
  }

}
</script>

<style scoped lang="less">

</style>
